<template>
    <div>
        <div @click="handleOpen" class="select-btn">
            {{ goodsName }}
            <label v-if="!goodsName" style="color: #ccc;">请选择商品</label>
            <CloseCircleFilled v-if="goodsName" @click.stop="clear" class="close-btn" />
        </div>

        <a-modal :open="visible" title="选择商品" :width="1200" :footer="null" @ok="handleOk" @cancel="handleClose"
            :destroyOnClose="true">
            <a-form :labelCol="{ style: { width: '100px' }, }">
                <a-row :gutter="[24, 10]">
                    <a-col :span="8">
                        <a-form-item label="商品名称">
                            <a-input v-model:value="formState.name" placeholder="请输入商品名称" />
                        </a-form-item>
                    </a-col>

                    <a-col :span="8">
                        <a-form-item :wrapperCol="{ span: 24 }">
                            <a-button type="primary" @click="getList(1)">查询</a-button>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>

            <a-form-item>
                <a-table :dataSource="dataSource" :columns="columns" rowKey="id" bordered size="small" style=""
                    :loading="loading" :scroll="{ x: 1000 }" :pagination="{
                        current: pageNum,
                        pageSize: pageSize,
                        total: totalCount,
                    }" @change="tableChange">
                    <template #bodyCell="{ index, column, record }">

                        <template v-if="column.dataIndex == 'index'">
                            {{ (pageNum - 1) * pageSize + index + 1 }}
                        </template>

                        <template v-if="column.dataIndex == 'company'">
                            {{ record.company.name }}
                        </template>
                        <template v-if="column.dataIndex == 'price'">
                            {{ record.price / 100 }}元 / {{ record.unit }}
                        </template>

                        <template v-if="column.key === 'action'">

                            <a-button @click="select(record)" type="link">选择</a-button>


                        </template>

                    </template>
                </a-table>
            </a-form-item>
        </a-modal>
    </div>
</template>
<script setup lang="ts">
import { CloseCircleFilled } from "@ant-design/icons-vue";
import { ref, watch, reactive } from 'vue';
import { getGoodsList } from '@/api/goodsApi'
import type { Goods } from '@/types/Goods';
import { Form } from 'ant-design-vue';
const formItemContext = Form.useInjectFormItemContext();

const goodsId = defineModel('goodsId')
const goodsName = defineModel('goodsName')
const goodsPrice = defineModel('goodsPrice')
const goods = defineModel<Goods>('goods')
const emit = defineEmits<{
    change: []
}>()

watch(goodsId, (newVal, oldValue) => {

    if (!newVal) {
        clear()
    }
    formItemContext.onFieldChange()
})

const visible = ref(false)

const loading = ref(false);
const pageNum = ref(1);
const pageSize = ref(10);
const totalCount = ref(0);
const dataSource = ref<Goods[]>([]);
const columns = ref([
    { title: '序号', dataIndex: 'index', align: 'center' },
    { title: '名称', dataIndex: 'name', align: 'center' },
    { title: '供应商', dataIndex: 'company', align: 'center' },
    { title: '价格', dataIndex: 'price', align: 'center' },
    { title: '操作', key: 'action', align: 'center', fixed: 'right', width: 300 },
]);

const formState = ref<Goods>({})


const getList = async (num: number) => {
    pageNum.value = num;

    let params = {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
        ...formState.value
    };
    loading.value = true;
    try {

        let res = await getGoodsList(params);


        dataSource.value = res.data.records;
        totalCount.value = res.data.total;
    } catch (error) {

    }
    loading.value = false;
};


const handleOk = () => {

    handleClose()
}
const handleOpen = () => {
    visible.value = true
    getList(1)
}
const handleClose = () => {
    visible.value = false
}

const tableChange = (e: any) => {
    getList(e.current)
};



const select = (record: Goods) => {
    
    goodsId.value = record.id
    goodsName.value = record.name
    goodsPrice.value = record.price
    goods.value = record

    formItemContext.onFieldChange()
    emit("change")
    handleClose()
}

const clear = () => {
    goodsId.value = undefined
    goodsName.value = undefined
    goodsPrice.value = undefined
    goods.value = {}
    emit("change")
    formItemContext.onFieldChange()

}



</script>
<style scoped>
.select-btn {
    position: relative;
    border: 1px solid #dcdcdc;
    border-radius: 2px;
    box-sizing: border-box;
    margin: 0;
    padding: 3px 11px;
    color: rgba(0, 0, 0, 0.88);
    font-size: 16px;
    height: 32px;
    cursor: pointer;
}

.close-btn {
    position: absolute;
    right: 5px;
    cursor: pointer;
    top: 8px;
    color: rgba(0, 0, 0, 0.25);
    font-size: 12px;
}
</style>